<template>
	<view class="Search">
		<!-- 搜索功能 -->
		<view class="Search-nav cu-bar search">
			<view class="search-form ">
				<text class="cuIcon-search text-bold text-orange"></text>
				<input v-model="searchValue" @confirm="searchFn" class="margin-left" :adjust-position="false"
					type="text" placeholder="搜索书架绘本" confirm-type="search"></input>
				<button :class="[searchValue ? '' : 'bg-gray text-white']"  @click="searchFn"
					class="cu-btn bg-orange sm margin-right-xs">搜索</button>
			</view>
		</view>
		<!-- 搜索结果 -->
		<CardLateral type="Search" v-if="rbdStatus" :search='searchValue' :value="item" @handle="bookcaseNav" v-for="item in rbdOption.value"
			:key="item.id" />
		<Divider v-if="rbdStatus && searchValue && rbdOption.value.length==0" :text="dividerText" />
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
	</view>
</template>

<script>
	import CardLateral from '@/plugin/card_lateral.vue';
	import Divider from '@/plugin/divider.vue';

	import * as api from '@/api/Search/index.js';

	import reachBottomDistance from '@/utils/reach_bottom_distance.js';
	export default {
		components: {
			CardLateral,
			Divider
		},
		mixins: [reachBottomDistance],
		data() {
			return {
				// 搜索值
				searchValue: ""
			}
		},
		computed: {
			// 未找到搜索结果提示
			dividerText() {
				let text = this.searchValue.lenght > 8 ? this.searchValue.slice(0, 8) + '...' : this.searchValue
				return `未找到“${text}”相关绘本`
			}
		},
		methods: {
			// 搜索功能
			searchFn() {
				this.searchValue = this.searchValue.trim();
				this.searchValue && this.rbdRefreshFn();
			},
			// rbdMixin
			rbdReqeust(params) {
				return api.searchBook(this.searchValue, params.page, params.pageSize);
			},
			// 跳转阅读页面
			bookcaseNav(value) {
				uni.navigateTo({
					url: '/pages/Bookcase/index?id=' + value.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.Search {
		.Search-nav {
			position: sticky;
			top: -2upx;
			z-index: 100;

			>view {
				border: 2upx solid #f07a1d;
				border-radius: 18upx;

				text {
					position: relative;

					&::after {
						display: block;
						content: '';
						position: absolute;
						right: -20upx;
						top: 25%;
						height: 50%;
						width: 2upx;
						background-color: #f07a1d;
					}
				}
			}
		}
	}
</style>